{% extends "base_manager.html" %}
{% block content %}



    <div class="page-header">
        <h1><span class="text-light-gray">管理 / </span>修改模型</h1>
    </div> <!-- / .page-header -->

    <div class="row">
        <div class="col-sm-12">


            <!-- 6. $WIZARD_FORMS_VALIDATION ===================================================================

                            Wizard forms validation
            -->
            <!-- Javascript -->
            <script>
                init.push(function () {
                    $('#wizard-forms').pixelWizard({
                        onFinish: function () {
                            // Disable changing step. To enable changing step just call this.unfreeze()
                            this.freeze();
                        }
                    });
                    $('#wizard-forms .wizard-prev-step-btn').on('click', function () {
                        $('#wizard-forms').pixelWizard('prevStep');
                        return false;
                    });

                    // Account page

                    $("#wizard-account").validate({
                        ignore: '.ignore',
                        focusInvalid: true,
                        rules: {
                            'username': {
                                required: true,
                                minlength: 3,
                                maxlength: 20
                            },
                            'password': {
                                required: true,
                                minlength: 6,
                                maxlength: 20
                            },
                            'repeat-password': {
                                required: true,
                                minlength: 6,
                                equalTo: 'input[name="password"]'
                            },
                            'email': {
                                required: true,
                                email: true
                            },
                        }
                    });
                    $('#wizard-account').on('submit', function () {
                        if ($(this).valid()) {
                            $('#wizard-forms').pixelWizard('nextStep');
                        }
                        return false;
                    });

                    // Profile page

                    $('#country').select2({
                        allowClear: true,
                        placeholder: '选择参数...'
                    }).change(function () {
                        $(this).valid();
                    });
                    $("#wizard-profile").validate({
                        ignore: '.ignore, .select2-input',
                        focusInvalid: true,
                        rules: {
                            'full_name': {
                                required: true
                            },
                            'country': {
                                required: true
                            },
                            'subscription': {
                                required: true
                            },
                            'gender1': {
                                require_from_group: [1, 'input[name="gender1"], input[name="gender2"]']
                            },
                            'gender2': {
                                require_from_group: [1, 'input[name="gender1"], input[name="gender2"]']
                            }
                        }
                    });
                    $('#wizard-profile').on('submit', function () {
                        if ($(this).valid()) {
                            $('#wizard-forms').pixelWizard('nextStep');
                        }
                        return false;
                    });

                    // Credit card page

                    var $wcc = $('#wizard-credit-card')
                    $wcc.find('[data-toggle="tooltip"]').tooltip();
                    $wcc.find('input[name="postal_code"]').mask("999999");
                    $wcc.find('input[name="credit_card_number"]').mask("9999 9999 9999 9999");
                    $wcc.find('input[name="csv"]').mask("999");
                    $wcc.validate({
                        ignore: '.ignore, .select2-input',
                        focusInvalid: true,
                        rules: {
                            'postal_code': {
                                required: true,
                                digits: true,
                                rangelength: [6, 6]
                            },
                            'credit_card_number': {
                                required: true,
                                creditcard: true
                            },
                            'csv': {
                                required: true,
                                digits: true,
                                rangelength: [3, 3]
                            }
                        }
                    });
                    $wcc.on('submit', function () {
                        if ($(this).valid()) {
                            $('#wizard-forms').pixelWizard('nextStep');
                        }
                        return false;
                    });

                    // Finish page

                    $('#wizard-finish button').click(function () {
                        $(this).parent().find('.text-lg').text('THANK YOU!');
                        $(this).parent().find('.fa-check').removeClass('fa-check').addClass('fa-check-circle');
                        $(this).remove();
                        $('#wizard-forms').pixelWizard('nextStep');
                        return false;
                    });

                });
            </script>
            <!-- / Javascript -->

            <!-- Styles -->
            <style type="text/css">
                #wizard-credit-card .tooltip {
                    left: auto !important;
                    right: 36px !important;
                    width: 200px !important;
                }
            </style>
            <!-- / Styles -->

            <div class="panel">
                <div class="panel-heading">
                    <span class="panel-title">在以下表格修改</span>
                </div>
                <div class="panel-body no-padding">

                    <div class="wizard no-margin" id="wizard-forms">

                        <!-- Steps -->
                        <div class="wizard-wrapper no-border">
                            <ul class="wizard-steps">
                                <li data-target="#wizard-account">
                                    <span class="wizard-step-number">1</span>
                                    <span class="wizard-step-caption">
											账户
											<span class="wizard-step-description">验证管理员身份</span>
										</span>
                                </li>
                                <li data-target="#wizard-profile">
                                    <!-- ! Remove space between elements by dropping close angle -->
                                    <span class="wizard-step-number">2</span>
                                    <span class="wizard-step-caption">
											模型
											<span class="wizard-step-description">修改参数</span>
										</span>
                                <li data-target="#wizard-finish">
                                    <!-- ! Remove space between elements by dropping close angle -->
                                    <span class="wizard-step-number">4</span>
                                    <span class="wizard-step-caption">
											修改成功！
										</span>
                                </li>
                            </ul> <!-- / .wizard-steps -->
                        </div> <!-- / .wizard-wrapper -->
                        <!-- / Steps -->

                        <!-- Pages -->
                        <div class="wizard-content panel no-margin no-border-hr no-border-b no-padding-hr">

                            <!-- Account page -->
                            <form class="wizard-pane form-bordered" id="wizard-account">

                                <div class="form-group no-padding-t no-border-t panel-padding-h">
                                    <div class="has-feedback">
                                        <input type="text" name="username" placeholder="Username"
                                               class="form-control">
                                        <i class="fa fa-user form-control-feedback"></i>
                                    </div>
                                </div>

                                <div class="border-t">
                                    <div class="row panel-padding-h">
                                        <div class="col-xs-6">
                                            <div class="form-group no-border">
                                                <div class="has-feedback">
                                                    <input type="password" name="password" placeholder="Password"
                                                           class="form-control">
                                                    <i class="fa fa-asterisk form-control-feedback"></i>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-xs-6">
                                            <div class="form-group no-border">
                                                <div class="has-feedback">
                                                    <input type="password" name="repeat-password"
                                                           placeholder="Repeat password" class="form-control">
                                                    <i class="fa fa-asterisk form-control-feedback"></i>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="form-group panel-padding-h">
                                    <div class="has-feedback">
                                        <input type="text" name="email" placeholder="Email" class="form-control">
                                        <i class="fa fa-envelope form-control-feedback"></i>
                                    </div>
                                </div>

                                <hr>
                                <div class="panel-padding-h">
                                    <button type="submit" class="btn btn-primary pull-right">下一步
                                    </button>
                                </div>
                            </form> <!-- / .wizard-pane -->
                            <!-- / Account page -->

                            <!-- Profile page -->
                            <form class="wizard-pane form-bordered" id="wizard-profile" style="display: none;">
                                <div class="form-group no-padding-t no-border-t panel-padding-h">
                                    <label for="full_name" class="col-md-3 control-label">参数一</label>
                                    <div class="col-md-9">
                                        <input type="text" name="full_name" placeholder="输入参数"
                                               class="form-control">
                                    </div>
                                </div>

                                <div class="form-group panel-padding-h">
                                    <label class="col-sm-3 control-label">参数二</label>
                                    <div class="col-sm-9">
                                        <div class="radio">
                                            <label>
                                                <input type="radio" name="gender1" value="1" class="px"> <span
                                                    class="lbl">1</span>
                                            </label>
                                        </div>
                                        <div class="radio no-margin-b">
                                            <label>
                                                <input type="radio" name="gender2" value="2" class="px"> <span
                                                    class="lbl">2</span>
                                            </label>
                                        </div>
                                    </div>
                                </div>

                                <div class="form-group panel-padding-h">
                                    <label class="col-sm-3">参数三</label>
                                    <div class="col-sm-9">
                                        <div class="checkbox">
                                            <label>
                                                <input name="subscription" value="1" type="checkbox" class="px">
                                                <span class="lbl">1</span>
                                            </label>
                                        </div>

                                        <div class="checkbox no-margin-b">
                                            <label>
                                                <input name="subscription" value="2" type="checkbox" class="px">
                                                <span class="lbl">2</span>
                                            </label>
                                        </div>
                                    </div>
                                </div>

                                <div class="form-group panel-padding-h">
                                    <label for="country" class="col-sm-3 control-label">参数四</label>
                                    <div class="col-sm-9">
                                        <select class="form-control" name="country" id="country">
                                            <option></option>
                                            <option value="1">1</option>
                                            <option value="2">2</option>

                                        </select>
                                    </div>
                                </div>

                                <hr>

                                <div class="pull-right panel-padding-h">
                                    <button type="button" class="btn wizard-prev-step-btn">上一步</button>&nbsp;&nbsp;
                                    <button type="submit" class="btn btn-primary ">下一步</button>
                                </div>
                            </form> <!-- / .wizard-pane -->

                            <div class="wizard-pane text-center panel-padding" id="wizard-finish"
                                 style="display: none;">
                                <i class="fa fa-check text-success text-slg"></i><br><br>
                                <span class="text-lg text-slim text-muted">修改模型参数成功</span>
                                <button class="btn btn-primary" style="margin: 25px auto;display: block;">Finish
                                </button>
                            </div> <!-- / .wizard-pane -->
                            <!-- / Finish page -->

                        </div> <!-- / .wizard-content -->
                        <!-- / Pages -->

                    </div> <!-- / .wizard -->
                </div>
            </div>
            <!-- /6. $WIZARD_FORMS_VALIDATION -->

        </div>
    </div>



{% endblock %}